<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // load 表示的是 readyStateChange为 4  ===> 即为load事件， 一次ajax请求，只会触发一次
        
        // readystatechange  ==> 一次ajax请求，会多次触发这个事件 2 3 4 

        // 原生ajax的写法，可以写成以下两种形式


        // 1. 创建xhr对象
        const xhr = new XMLHttpRequest()
        // 2. 设置请求方法和地址
        xhr.open('get', URL)
        // 3. 请求头
        // 4. 注册回调函数
        xhr.addEventListener('load', function(){
            // 就不用判断状态为4
            if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
                console.log(xhr.response)// ==> 可以
                console.log(xhr.responseText) // ==> 可以

                // xhr.response 是根据响应头里面的 content-type自动解析的，一般是二进制的数据，音视频
                // xhr.responseText 一般是文本数据，比如html，json，纯文本。
            }else{
                console.log('请求不成功')
            }
        })
        // 5. 发送请求
        xhr.send()


        // 另一种 reaystatechange 参考最开始的那种情况

        // const xhr = new XMLHttpRequest()
        //     // 2. 设置请求方法和地址 
        //     xhr.open('get', 'http://ajax-api.itheima.net/api/news')
        //     // 3. 设置请求头 ==> 可以省略 如果后端需要，就要设置，不需要，设置了也没关系，可以自定义
        //     xhr.setRequestHeader('myHeader', 'goodHeader')
        //     xhr.setRequestHeader('otherHeader', 'dogHead')
        //     // 4. 注册回调函数  
        //     //  readystatechange  ==> 表示ajax请求的状态改变
        //     // xhr.readystate ==> 从我们实例化xhr对象开始，就在变化 0-4 值， 4 表示服务器已经把数据返回给我了
        //     xhr.addEventListener('readystatechange', function(){
        //         if (xhr.readyState === 4){

        //             // 什么时候是成功的请求状态 http状态？200 - 300   304 资源未修改，缓存
        //             if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
        //                 console.log(xhr.response)
        //             } else {
        //                 console.log('请求不成功')
        //             }

        //         }
        //     })
    </script>
</body>
</html>